<template>
  <view>
    <view class="goods-list">
      <view
        v-for="goods in goodsList"
        :key="goods.goods_id"
        class="goods-item"
        @click="gotoProductDetail(goods)"
      >
        <!-- 商品左侧图片区域 -->
        <view class="goods-item-left">
          <image
            :src="goods.goods_small_logo || defaultImg"
            class="goods-pic"
          ></image>
        </view>

        <!-- 商品右侧信息区域 -->
        <view class="goods-item-right">
          <!-- 商品标题 -->
          <view class="goods-name">{{ goods.goods_name }}</view>
          <view class="goods-info-box">
            <!-- 商品价格 -->
            <view class="goods-price">{{ goods.goods_price | formatNum }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 1. 搜索数据对象
      params: {
        query: "",
        cid: "",
        pagenum: 1,
        pagesize: 20,
      },
      // 2. 商品列表
      goodsList: [],
      // 3. 总条数
      total: 0,
      // 4. 默认图片
      defaultImg:
        "https://heima-hrsass-109-1312445828.cos.ap-shanghai.myqcloud.com/06083124032e78f7f2669db18a7affd.jpg",
      // 5. 节流阀
      isLoading: false,
    };
  },
  onLoad({ query, cid }) {
    this.params.query = query || "";
    this.params.cid = cid || "";

    this.getGoodsList();
  },
  onReachBottom() {
    // 1.0 判断: 当前请求是否结束
    if (this.isLoading) return;

    // 判断是否全部加载完成数据
    if (this.goodsList.length === this.total)
      return this.$msg("没有更多数据了...");

    // 1.1 让当前的页码+1
    this.params.pagenum += 1;
    // 1.2 重新加载数据
    this.getGoodsList();
  },
  async onPullDownRefresh() {
    // 清空数据数组重新加载
    this.goodsList = [];
    this.params.pagenum = 1;
    await this.getGoodsList();
    // 关闭下拉刷新
    uni.stopPullDownRefresh();
  },
  methods: {
    // 1. 获取商品列表
    async getGoodsList() {
      // 1.0 开启节流阀
      this.isLoading = true;

      try {
        // 1.1 请求数据
        const { meta, message } = await this.$http.get(
          "/goods/search",
          this.params
        );
        if (meta.status !== 200) {
          return this.$msg();
        }
        // console.log(message);
        this.total = message.total;
        // 注意: 合并数组
        this.goodsList = [...this.goodsList, ...message.goods];
      } catch (err) {
        // 1.3 让当前的页面-1
        if (this.params.pagenum > 1) {
          this.params.pagenum--;
        }
      } finally {
        // 1.2 关闭节流阀
        this.isLoading = false;
      }
    },
    // 2. 去商品详情页
    gotoProductDetail(goods) {
      uni.navigateTo({
        url: `/pages_sub1/product-detail/product-detail?pid=${goods.goods_id}`,
      });
    },
  },
  // 过滤器
  // filters: {
  //   // 1. 格式化价格
  //   formatNum(value) {
  //     return "¥" + Number(value).toFixed(2);
  //   },
  // },
};
</script>

<style scoped lang="scss">
.goods-item {
  display: flex;
  padding: 20rpx 10rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .goods-item-left {
    margin-right: 10rpx;

    .goods-pic {
      width: 200rpx;
      height: 200rpx;
      display: block;
    }
  }

  .goods-item-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .goods-name {
      font-size: 26rpx;
    }

    .goods-price {
      font-size: 32rpx;
      color: #c00000;
    }
  }
}
</style>